<template>
    <view>
        <view class="index-head">
            <view class="index-head-top">
                <navigator class="index-head-search" type="input"
                           open-type="navigate" url="/pages/index/search/index" hover-class="none">
                    <view class="icon icon-sousuo"></view>
                    <view class="index-head-search-txt">请输入课程的关键字搜索</view>
                </navigator>
            </view>
        </view>
        <view class="index-banner-box">
            <view class="index-head-banner">
                <view class="index-banner">
                    <swiper
                            class="swiper"
                            :indicator-dots="swiper_config.indicatorDots"
                            :autoplay="swiper_config.autoplay"
                            :interval="swiper_config.interval"
                            :duration="swiper_config.duration"
                    >
                        <swiper-item v-for="(item, index) in swiper_list" :key="index">
                            <view class="page-section swiper"
                                  @click="goto_detail(item)"
                                  >
                                <view class="page-section-spacing"><img :src="item.image"/></view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
        <view class="index-content">
            <view class="index-nav">
                <block v-for="(item, index) in menu" :key="index">
                    <view class="index-nav-flex" v-if="index < 9"  @tap="goto_detail(item)">
                         <image class="index-nav-img" :src="item.image"></image>
                         <view class="index-nav-title">{{item.title}}</view>
                    </view>
                </block>
            </view>
        </view>
        <view class="index-kecheng">
                <view class="index-kecheng-title">
                    <view class="index-kecheng-title-l">
                        <image :src="static_media.img02" class="index-kecheng-title-img"></image>
                        <view>推荐名师</view>
                    </view>
                    <navigator class="index-kecheng-title-r" open-type="navigate" hover-class="none" url="/pages/index/teach">
                        <view class="an-notice-more-l"><span>查看全部</span></view>
                        <view>></view>
                    </navigator>
                </view>
                <view class="index-content-ms" v-if="teacher_list.length">
                    <view class="index-content-ms-overflow">
                        <view class="index-content-ms-flex" v-for="(item, index) in teacher_list" :key="index" @tap="goto_teach_detail(item)">
                            <image :src="item.image" class="index-content-ms-img"></image>
                            <view>{{item.name}}</view>
                        </view>
                    </view>
                </view>
        </view>
        <view class="index-kecheng">
            <block>
                <view class="index-kecheng-title">
                    <view class="index-kecheng-title-l">
                        <image :src="static_media.img01" class="index-kecheng-title-img"></image>
                        <view>精品课程</view>
                    </view>
                    <navigator class="index-kecheng-title-r" open-type="switchTab" hover-class="none" url="/pages/index/classification">
                        <view class="an-notice-more-l"><span>查看全部</span></view>
                        <view>></view>
                    </navigator>
                </view>
                <view class="index-content-qy">
                    <block v-for="(item, index) in video_list" :key="index">
                        <view class="video-content" @tap="gotoCourse(item)">
                            <image class="video-content-img" :src="item.cover"></image>
                            <view class="video-content-flex">
                                <view>
                                    <view class="video-content-h1">{{item.title}}</view>
                                </view>
                                <view class="video-content-learn">
                                    <view class="video-content-detail">
                                        <view class="video-content-detail-price video-content-detail-free" v-if="item.price==0.00">免费</view>
                                        <view class="video-content-detail-price" v-else>￥{{item.price}}</view>
                                        <view class="video-content-detail-r" v-if="item.price!=0.00">
                                            <view v-if="item.vip_price==0.00" style="color: #ff4a4a">免费</view>
                                            <view v-else>￥{{item.vip_price}}</view>
                                            <image class="video-content-detail-img" :src="static_media.img03"></image>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
            </block>
        </view>


    </view>
</template>
<script>
    import {mapState} from 'vuex';

    export default {
        data() {
            return {
                swiper_list: [],
                swiper_config: {
                    indicatorDots: true,
                    autoplay: true,
                    interval: 2000,
                    duration: 500,
					},
				menu:[],
                video_list: [],
                teacher_list: []

            };
        },
        onShow() {
            this.get_lunbo_list();
            this.getTeacherList();
			this.getMenu();
            this.getVideoList();
        },
        computed: {
            ...mapState(['userInfo']),
            static_media() {
                return {
                    img01: this.$lib.$config.localMedia + '/static/img/ke-icon1.jpg',
                    img02: this.$lib.$config.localMedia + '/static/img/ke-icon2.jpg',
                    img03: this.$lib.$config.localMedia + '/static/img/vip-price.png',
                };
            }
        },
        components: {
        },

        methods: {
			async get_lunbo_list() {
			    let res = await this.$lib.$http.post({
			        url: this.$lib.$urlMap.swiper,
			        data: {},
                    needLogin:true
			    });
			    if (res.code === 1) {
			        let rows = res.data.data || [];
			        rows = rows.sort(function (a, b) {
			            return a.listorder - b.listorder
			        })
			        this.swiper_list = rows;
			    }
			},
			async getMenu(){
				let res = await this.$lib.$http.post({
					url:this.$lib.$urlMap.menu,
					data:{},
                    needLogin:true
				});
				if(res.code == 1){
					let rows = res.data.data || [];
					this.menu = rows

				}
			},
            async getVideoList(){
                let res = await this.$lib.$http.post({
                    url:this.$lib.$urlMap.hotList,
                    data:{
                        page: 1,
                        limit: 5
                    },
                    needLogin:true
                });
                if(res.code == 1){
                    let rows = res.data.data || [];
                    this.video_list = rows
                }
            },
            async getTeacherList(){
                let res = await this.$lib.$http.post({
                    url:this.$lib.$urlMap.teacherHot,
                    data:{},
                    needLogin:true
                });
                if(res.code == 1){
                    let rows = res.data.data || [];
                    this.teacher_list = rows
                }
            },
			//进入课程
			gotoCourse(item){
				uni.navigateTo({
				    url: '/pages/index/detail?id=' + item.id
				})
			},


            goto_detail (item) {
                if (item.url !== null && item.url !== ""){
                    window.location.href = item.url
                }
            },

            goto_teach_detail (item) {
                uni.navigateTo({
                    url: '/pages/index/teachDetail?id=' + item.id
                })
            },
        }
    };
</script>
<style>
    page {
        background: #f6f7f9;
    }
    /*头*/
    .index-head{
        border-bottom:none
    }
    .index-head-top {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #000;
        width: 96%;
        margin: 0 auto;
        line-height: 58px;
        padding: 12px 0;
    }
    .index-head-top .icon-sousuo {
        font-size: 17px;
        color: #b1b1b1;
        margin-right: 2px;
    }
    .index-head-top .index-head-search {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        width: 95%;
        margin: 0 auto;
        font-size: 14px;
        height: 37px;
        border-radius: 32px;
        color: #989898;
    }
    .index-head-search-txt{color: #b5b5b5;font-size: 13px}
/*头结束*/
/*轮播图*/
    .index-banner-box{
        background: #fff;
        padding-bottom: 12px;
    }
    .index-head-banner {
        background: #fff;
        border-radius: 10px;
        width: 92%;
        margin: 0 auto;
        box-shadow: 0 2px 8px rgba(117, 117, 117, 0.45);
    }
    .index-banner img {
        width: 100%;
        height: 178px;
        border-radius: 10px;
    }

    .index-banner .uni-swiper-dot-active::before {
        background: #fdd100 !important;
    }

    .swiper {
        height: 178px !important;
    }
    /*轮播图结束*/
    /*图标*/
    .index-content{
        background: #fff;
    }
    .index-nav {
        display: flex;
        text-align: center;
        font-size: 14px;
        color: #605d70;
        padding: 0 0 12px;
        flex-flow: wrap;
    }
    .index-nav img {
        width: 60px;
        height: 60px;
    }

    .index-nav-img {
        width: 48px;
        height: 48px;
        border-radius:50%;
    }

    .index-nav .index-nav-flex {
        width: 20%;
		margin: 6px 0;
    }
    /*图标结束*/
    /*视频头*/
    .index-kecheng {
        background: #fff;
    }
    .index-kecheng-title {
        width: 100%;
        margin: 0 auto;
        padding: 14px 0 3px;
        display: flex;
        justify-content: space-between;
        border-top: solid 10px #f6f7f9;
    }
    .index-kecheng-title-l {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 16px;
        margin-left: 13px;
    }
    .index-kecheng-title-img {
        width: 25px;
        height: 25px;
        margin-right: 6px;
    }
    /*查看更多按钮*/
    .index-kecheng-title-r {
        font-size: 13px;
        color: #b7b7b7;
        text-align: center;
        display: flex;
        align-items: center;
        margin-right: 12px;
    }
    .an-notice-more-l{
        margin-right: 3px;
    }
    /*视频头结束*/
    /*课程列表*/
    .index-content-qy {
        padding-top: 12px;
        width: 93%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .index-content-qy .video-content {
        margin-bottom: 13px;
        display: flex;
        align-items:self-start;
        padding-top: 0;
        border-bottom: solid 1px #f5f5f5;
        padding-bottom: 13px;
    }
    .index-content-qy .video-content:last-child {
        border-bottom: none!important;
        padding-bottom: 0;
    }
    .video-content-img {
        width: 114px;
        height: 82px;
        border-radius: 5px;
    }
    .video-content-flex {
        display: flex;
        flex-direction: column;
        align-items: start;
        text-align: left;
        flex: 1;
        padding-left: 12px;
        height: 82px;
        justify-content: space-between;
    }
    .video-content-h1 {
        color: #000;
        font-size: 16px;
        line-height: 20px;
        padding-bottom: 4px;
    }
    .video-content-learn {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }
    .index-content-ms {
        display: flex;
        align-items: center;
        width: 93%;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .index-content-ms-overflow{
        display: flex;
        align-items: center;
        padding: 12px 0 9px 5px;
        overflow-x: scroll;
        width: 100%;
    }
    .index-content-ms-flex{
        padding: 20px;
        margin-right: 14px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 13px;
        color: #5f5f5f;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(117, 117, 117, 0.25);
    }
    .index-content-ms-img{
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-bottom: 6px;
    }
</style>
